<script setup>
import {ref} from "vue";
import {addUser} from "@/apis/user";
import {Message} from "tdesign-mobile-vue";
import {useRouter} from "vue-router";

const formData = ref({
  card: "",
  phone: "",
  student_id: "",
  profile: {
    name: "",
    gender: "0",
    grade: "",
    class: "",
    qq_account: "",
    cnc_experience: "",
    demand: ""
  },
});
const loading = ref(false);
const router = useRouter();

function submitFunc() {
  loading.value = true;
  addUser(formData.value)
      .then(res => {
        const {code, msg} = res.data;
        if (code === 1) {
          Message.success({
            content: msg,
            offset: [10, 16],
            context: document.querySelector('#container')
          })
          setTimeout(() => {
            router.back()
          }, 3000);
        } else {
          Message.error({
            content: msg,
            offset: [10, 16],
            context: document.querySelector('#container')
          })
        }
      })
      .finally(() => {
        loading.value = false;
      })
}
</script>
<template>
  <main id="container">
    <t-cell-group title="基本信息">
      <t-form label-width="200">
        <t-form-item requiredMark label="姓名">
          <t-input v-model="formData.profile.name" borderless placeholder="请填写真实姓名"></t-input>
        </t-form-item>
        <t-form-item requiredMark label="学号">
          <t-input v-model="formData.student_id" borderless placeholder="请填写真实学号"></t-input>
        </t-form-item>
        <t-form-item requiredMark label="性别" style="padding: 16px;">
          <t-radio-group class="box" v-model="formData.profile.gender" borderless>
            <t-radio :block="false" name="radio" value="0" label="男"/>
            <t-radio :block="false" name="radio" value="1" label="女"/>
          </t-radio-group>
        </t-form-item>
        <t-form-item requiredMark label="年级">
          <t-input v-model="formData.profile.grade" borderless placeholder="例：2023级"></t-input>
        </t-form-item>
        <t-form-item requiredMark label="专业班级">
          <t-input v-model="formData.profile.class" borderless placeholder="例：数控技术1班"></t-input>
        </t-form-item>
        <t-form-item requiredMark label="手机号">
          <t-input v-model="formData.phone" borderless placeholder="请填写正确的手机号"></t-input>
        </t-form-item>
        <t-form-item requiredMark label="QQ/微信">
          <t-input v-model="formData.profile.qq_account" borderless placeholder="请填写QQ/微信"></t-input>
        </t-form-item>
        <t-form-item requiredMark label="身份证号">
          <t-input v-model="formData.card" borderless
                   placeholder="请填写正确的身份证号"></t-input>
        </t-form-item>
      </t-form>
    </t-cell-group>
    <t-cell-group title="拓展信息">
      <t-form label-width="200">
        <t-form-item requiredMark style="padding: 16px;" label="是否相关基础">
          <t-radio-group class="box" :default-value="formData.profile.cnc_experience"
                         v-model="formData.profile.cnc_experience" borderless>
            <t-radio :block="false" name="radio" value="1" label="是"/>
            <t-radio :block="false" name="radio" value="2" label="否"/>
          </t-radio-group>
        </t-form-item>
        <t-form-item requiredMark label="需求目标">
          <t-input borderless v-model="formData.profile.demand" placeholder="加工工艺、非标定制、大赛经验"></t-input>
        </t-form-item>
      </t-form>
    </t-cell-group>

    <div style="padding: 8px;">
      <t-button :loading="loading" :dislabled="loading" block theme="primary" @click="submitFunc">保存</t-button>
    </div>
  </main>
</template>
